<template>
	<!-- 头部模块 -->
  <div class="index-nav">
    <nav role="navigation" class="view-nav">
      <div class="nav-list left">
        <a class="nav-item"  :class="{active: isActive == 0}" @click.prevent="clickNav(0, '推荐','')">
          <div class="category-popover-box">推荐</div>
        </a>
        <a class="nav-item" v-for="(item, index) in nav" :key="index" :class="{active: isActive == index+1}" @click.prevent="clickNav(index, item.name,item.name)">
          <div class="category-popover-box">{{item.name}}</div>
        </a>
      </div>
    </nav>
	</div>

</template>
<script>
	export default {
		name: 'index-nav',
		data() {
			return {
          nav: [],
          isActive: 0,
        currentTag: '推荐',
        category_id: '全部',
			}
		},
    created() {
      this.$axios.getData.getCategory().then(res => {
        this.nav = res.data.data
      })
    },
		methods: {
      clickNav(index, item,category_id) {
        if(this.currentTag === item) return
        if (item == '推荐') {
          this.isActive = 0
          this.category_id = 0
        }else{
          this.isActive = index+1
          this.category_id = category_id
        }
        this.currentTag = item
        // 请求数据
        this.$emit('getTopicByTag', 'category')
      }
    }
	}
</script>
<style lang="scss" scoped>
/* 此处一定要加上~，在dom中使用也要加~ */
@media (min-width: $action-width) {
  .view-nav {
    height: 50px;
    line-height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
  }
  .nav-list {
    position: relative;
  }

  .view-nav .nav-list {
    width: auto;
    overflow-x: auto;
  }
  .view-nav .nav-list {
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 1;
    max-width: 1400px;
  }
  .view-nav .nav-list .nav-item:first-child, .view-nav .nav-list .nav-item:last-child {
    padding: 0 1.5rem;
  }
  .view-nav .nav-list .nav-item.active, .view-nav .nav-list .nav-item:hover {
    color: #80bd01;
  }
  .view-nav .nav-list .nav-item:first-child {
    padding: 0 1rem 0 0;
  }
  .view-nav .nav-list .nav-item{
    height: 100%;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    color: #71777c;
    padding: 0 1rem;
  }
  .nav-item {
    position: relative;
    cursor: pointer;
  }
}
// 移动端
@media (max-width: $action-width) {
  .view-nav {
    height: 50px;
    line-height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
  }
  .nav-list {
    position: relative;
  }

  .view-nav .nav-list {
    width: auto;
    overflow-x: auto;
  }
  .view-nav .nav-list {
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    line-height: 1;
    max-width: 1400px;
  }
  .view-nav .nav-list .nav-item:first-child, .view-nav .nav-list .nav-item:last-child {
    padding: 0 1.5rem;
  }
  .view-nav .nav-list .nav-item.active, .view-nav .nav-list .nav-item:hover {
    color: #80bd01;
  }
  .view-nav .nav-list .nav-item:first-child {
    padding: 0 1rem 0 0;
  }
  .view-nav .nav-list .nav-item{
    height: 100%;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    color: #71777c;
    padding: 0 1rem;
  }
  .nav-item {
    position: relative;
    cursor: pointer;
  }
}

</style>